<template name="home">
	<view>
		<cu-custom :bgColor="NavBarColor" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">入库单详情</block>
		</cu-custom>
		<scroll-view>
			<view class="middleApp" v-for="(miditem,position) in middleApps">
				<!-- 常用服务 -->
				<view class="cu-bar solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
					<view class="action">
						<text class='cuIcon-title text-new'></text>{{miditem.title}}
					</view>
				</view>

				<view class="cu-list grid col-2 text-sm">
					<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
						v-for="(item,index) in miditem.children" :key="index" @tap="goPage(item.page,index)">
						<view class="padding text-center">
							<image :src="item.icon" style="width:36px;height:36px;">
								<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em"
									v-if="getTtemDotInfo(item)">
									<block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
								</view>
							</image>
							<view class="margin-top">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-tabbar-height margin-top"></view>
	</view>
</template>

<script>
	const icon_prefix = "/static/home/128/"
	import socket from '@/common/js-sdk/socket/socket.js'
	export default {
		name: 'home',
		props: {
			cur: String,
		},
		watch: {
			cur: {
				immediate: true,
				handler: function(val, oldVal) {
					console.log('cur', val, oldVal)
					this.initMenu()
				},
			},
		},
		data() {
			return {
				middleApps: [{
						title: '入库管理',
						children: [{
								title: "采购入库",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingList'
							},
							{
								title: "采购入库SN",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingList'
							},
							{
								title: "退货入库",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingList'
							},
							{
								title: "盘盈入库",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingList'
							},
						]
					},
					{
						title: '出库管理',
						children: [{
								title: "采购出库",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingForm'
							},
							{
								title: "采购出库SN",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingForm'
							},
							{
								title: "退货出库",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingForm'
							},
							{
								title: "盘盈出库",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingForm'
							}
						]
					}, {
						title: '库存管理',
						children: [{
								title: "库存查询",
								icon: icon_prefix + "bg-list.png",
								page: 'incomingList'
							},
							{
								title: "库存管理",
								icon: icon_prefix + "bg-book.png",
								page: 'incomingList'
							}
						]
					}
				],
				msgCount: 0,
				dot: {
					mailHome: false
				}
			}
		},
		methods: {
			initMenu() {
				console.log("-----------home------------")
				this.onSocketOpen()
				this.onSocketReceive()
				this.loadCount(0);
			},
			goPage(page, index) {
				let pathURL = '../incoming/incomingList?cid='
				if (!page) {
					return false;
				}
				if (page === 'incomingList') {
					this.msgCount = 0
				} else {
					pathURL = '../incoming/incomingForm?cid='
				}
				// this.dot[page] = false
				// this.$Router.push({
				// 	name: page,
				// 	params: {
				// 		cid: index
				// 	}
				// })
				uni.navigateTo({
					url: pathURL + index
				})
			},
			// 启动webSocket
			onSocketOpen() {
				socket.init('websocket');
			},
			onSocketReceive() {
				var _this = this
				socket.acceptMessage = function(res) {
					// console.log("页面收到的消息", res);
					if (res.cmd == "topic") {
						//系统通知
						_this.loadCount('1')
					} else if (res.cmd == "user") {
						//用户消息
						_this.loadCount('2')
					} else if (res.cmd == 'email') {
						//邮件消息
						_this.loadEmailCount()
					}
				}
			},
			loadCount(flag) {
				console.log("loadCount::flag", flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						let msg1Count = res.data.result.anntMsgTotal;
						let msg2Count = res.data.result.sysMsgTotal;
						this.msgCount = msg1Count + msg2Count
						console.log("this.msgCount", this.msgCount)
					}
				})
			},
			loadEmailCount() {
				this.dot.mailHome = true
			},
			getTtemDotInfo(item) {
				if (item.page === 'incoming' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			}
		}
	}
</script>

<style scoped>
	.cu-list.grid>.cu-item {
		padding: 0px 0px;
	}

	.line2-icon {
		width: 60px;
		height: 60px;
	}

	.middleApp {
		width: 100%;
		background-color: #f1f1f1;
	}
</style>